<template>
  <!-- 首页 -->
  <div class="page-home">

    <div id="main">

      <!-- <div class="tablist">
        <router-link class="tab-item" to="/deviceInfo">
          <div class="item-box">
            <img src="static/eqp.png" alt=""/>
            <span>设备信息</span>
          </div>
        </router-link>
        <router-link class="tab-item" to="/agv">
          <div class="item-box">
            <img src="static/AGV.png" alt=""/>
            <span>AGV控制</span>
          </div>
        </router-link>
        <router-link class="tab-item" to="/map">
          <div class="item-box">
            <img src="static/map.png" alt=""/>
            <span>地图管理</span>
          </div>
        </router-link>
        <router-link class="tab-item" to="/todo">
          <div class="item-box">
            <img src="static/mission.png" alt=""/>
            <span>任务管理</span>
          </div>
        </router-link>
        <router-link class="tab-item" to="/analyse">
          <div class="item-box">
            <img src="static/analyse.png" alt=""/>
            <span>分析任务</span>
          </div>
        </router-link>

      </div> -->
      <!-- 任务进度 -->
      <div class="todo_progress">
        <div class="todo_title">任务进度</div>
        <el-table :data="tableData" style="width: 100%" height="362">
          <el-table-column label="序号" align="center" width="80">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pro_name" label="项目名称" align="center">
            <template slot-scope="scope">
              <!-- <span>{{ scope.row.pro_name }}</span> -->
              <!-- 根据索引拿值 -->
              <span>{{ scope.row[1] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="start_time" label="开始时间" align="center">
            <template slot-scope="scope">
              <!-- <span>{{ scope.row.start_time }}</span> -->
              <span>{{ scope.row[2] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="dur_time" label="运行时间" align="center">
            <template slot-scope="scope">
              <!-- <span>{{ scope.row.dur_time }}</span> -->
              <span>{{ scope.row[3] }}</span>
            </template>
          </el-table-column>


          <el-table-column prop="progress" label="进度" align="center">
            <template slot-scope="scope">
              <!-- <span style="color: #12ecff">{{ scope.row.progress }}</span> -->
              <span style="color: #12ecff">{{ scope.row[4] * 100 + '%' }}</span>
            </template>
          </el-table-column>

          <!--  <el-table-column label="操作" align="center">
             <template slot-scope="scope">
               <el-button
                 @click="handleStop(scope.row[0], tableData)"
                 type="text"
                 style="color: #ffc950"
                 class="el-icon-video-pause"
                 v-if="scope.row[4] === 1"
                 >停止</el-button
               >



               <el-button
                 @click="handleStart(scope.row[0], tableData)"
                 type="text"
                 style="color: #168fff"
                 class="el-icon-video-play"
                 v-if="scope.row[4] === 0 ||-1"
                 >开始</el-button
               >


               <el-button
                 type="text"
                 class="el-icon-delete"
                 style="color: #ff314e"
                 @click="handleDelete(scope.row[0], tableData)"
                 >删除</el-button
               >
             </template>
           </el-table-column> -->
        </el-table>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "@/components/common/Footer";
import { indexApis } from "@/utils/apis";
import settings from "../../../config/settings";

export default {
  components: {
    Footer,
  },
  created() {
  },


  data() {
    return {
      tableData: [],
    };
  },

  methods: {
    // 停止任务
    handleStop(id, rows) {
      // 若传id，请修改index
      this.$confirm("你确定要停止选中的任务吗？").then((res) => {
        if (res == "confirm") {

          // 请求 停止任务接口
          /* 接口名：stoptask
          参数：id */
          this.$axios.get(this.$settings.BASE_URL + 'AGV/' + indexApis.stopTask + `?id=${id}`).then((res) => {
            if (res.data.code == 100) {
              this.tableData = res.data.data
            }
          })
            .catch((err) => {
            });

          rows[index].status = 0;//此处需要修改状态
        } else {
        }
      });
    },
    // 开始任务
    handleStart(id, rows) {
      this.$confirm("你确定要开始选中的任务吗？").then((res) => {
        if (res == "confirm") {

          // 请求 开始任务接口
          /* 接口名：starttask
          参数：id */
          this.$axios.get(this.$settings.BASE_URL + 'AGV/' + indexApis.startTask + `?id=${id}`).then((res) => {
            if (res.data.code == 100) {
              this.tableData = res.data.data;
            }
          })
            .catch((err) => {
            });
          rows[index].status = 1;//此处需要修改状态
        } else {
        }

      });
    },
    // 删除任务
    handleDelete(id, rows) {
      // console.log(this.$confirm('确认删除吗？'));
      this.$confirm("你确定要删除选中的任务吗？").then((res) => {
        if (res == "confirm") {

          // 请求 删除任务接口
          /* 接口名：deltask
          参数：id */
          this.$axios.get(this.$settings.BASE_URL + 'AGV/' + indexApis.delHomeTask + `?id=${id}`)
            .then((res) => {
              if (res.data.code == 100) {
                this.tableData = res.data;
              }
            })
            .catch((err) => {

            });

        } else {
        }

      });
    },

    handleClose(done) {
      done();
    },
  },
};
</script>

<style lang="less">
.page-home {
  #main {
    // margin: @h*18vh @w*30vw;
    margin-bottom: @h*37vh;

    .tablist {
      display: flex;
      justify-content: space-between;

      .tab-item {
        display: block;
        border-radius: 0.25rem;
        width: @w*380vw;
        background: #2e2e2e;
        height: @h*165vh;
        line-height: @h*165vh;

        .item-box {
          display: flex;
          width: 100%;
          height: 100%;

          img {
            margin-left: @w*80vw;
          }

          span {
            flex-shrink: 0; //控制文字不换行
            flex: 1;
            text-align: center;
            font-size: 1.125rem;
          }
        }
      }
    }

    .todo_progress {
      height: @h*1000vh;
      // padding-bottom: @h*40vh;
      background: #2e2e2e;
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      // margin-top: @h*20vh;

      .todo_title {
        font-size: 1.125rem;
        background: #383838;
        color: #fff;
        // height: @h*74vh;
        // line-height: @h*74vh;
        height: 60px;
        line-height: 60px;
        padding-left: @w*30vw;
        border-bottom: 0.0625rem solid #666;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
      }

      .el-table {
        font-size: 1.125rem;
      }

      .el-table__body-wrapper {
        background: #2e2e2e;
      }

      .el-table::before {
        background: none;
      }

      .el-table th {
        background: #383838;
        border-bottom: 0.0625rem solid #666;
        color: #fff;
        height: 59px;
        line-height: 59px;
        // height: @h*78vh;
        // line-height:@h*78vh;
        padding: 0;
      }

      .el-table td {
        background: #2e2e2e;
        border-bottom: 0.0625rem solid #666;
        color: #fff;
        height: 60px;
        line-height: 60px;
        padding: 0;
      }

      .el-button {
        font-size: 1.125rem;
        margin: 0 @w*5vw;
      }

      .el-icon-video-pause:before {
        margin-right: @w*25vw;
      }

      .el-icon-delete:before {
        margin-right: @w*25vw;
      }

      .el-icon-video-play:before {
        margin-right: @w*25vw;
      }
    }
  }
}
</style>
